﻿@(Html.DevExtreme().Form()
    .ID("form")
    .LabelLocation(FormLabelLocation.Top)
    .MinColWidth(233)
    .ColCount(Mode.Auto)
    .ColCountByScreen(c => c.Md(3).Sm(2))
    .ScreenByWidth("screenByWidth")
    .CustomizeItem("form_customizeItem")
    .FormData(Model)
)

<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Text("Set the count of columns regardless of screen size")
            .Value(true)
            .OnValueChanged("ckeckBox_valueChanged")
        )
    </div>
</div>

<script>
    function getFormInstance() {
        return $("#form").dxForm("instance");
    }

    function screenByWidth(width) {
        return width < 720 ? "sm" : "md";
    }

    function ckeckBox_valueChanged(e) {
        var form = getFormInstance();
        if(e.value) {
            form.option("colCountByScreen.sm", 2);
            form.option("colCountByScreen.md", 3);
        } else {
            form.option("colCountByScreen.sm", undefined);
            form.option("colCountByScreen.md", undefined);
        }
    }

    function form_customizeItem(item) {
        if(item.dataField == "Notes")
            item.visible = false;
    }
</script>
